<template>
	<view class="auth">
		<view class="info">
			<view class="line">
				<view class="l">便民分类：</view>
				<input type="text" class="r" placeholder="请选择分类" v-model="cate" />
				<u-icon size="20" color="#DCDCDC" style="margin-left: 10rpx;" name="arrow-down-fill"></u-icon>
				<uni-data-picker v-if="items.length>0" class="picker" :localdata="items" popup-title="请选择分类" @change="onchange"></uni-data-picker>
			</view>
			<view class="line">
				<view class="l">联系人：</view>
				<input type="text" class="r" v-model="user" placeholder="请输入联系人" />
			</view>
			<view class="line">
				<view class="l">联系电话：</view>
				<input type="tel" class="r" v-model="mobile" placeholder="请输入联系电话" />
			</view>
			<view class="line">
				<view class="l">信息标题：</view>
				<input type="tel" class="r" v-model="name" placeholder="请输入信息标题" />
			</view>
			<view class="line imgBox">
				<view class="l">信息内容：</view>
				<textarea v-model="content" :maxlength="-1" class="r" placeholder="请输入便民信息内容" />
			</view>
			
			<view class="line imgBox">
				<view class="l">介绍图片：</view>
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="10"></u-upload>
			</view>
			
			<view class="info-box" style="margin-top: 24rpx">
			<view class="info-each">
				<view class="">展示视频</view>
				<view class="">
					<!-- <text class="tint">请上传展示视频</text> -->
				</view>
			</view>
			<view style="color: #999999;font-size: 22rpx;padding-top: 5rpx;">视频不要求必须上传，视频上传后，将会在平台上展示，同时半柿团队会将视频发到视频平台上帮你免费宣传</view>
			<view class="upimg">
				<u-upload
					:fileList="fileList2"
					@afterRead="afterRead"
					@delete="deletePic"
					name="2"
					multiple
					:maxCount="1"
					accept="video"
				>
				<image src="../../static/imgs.png" mode="widthFix"
					style="width: 130rpx;height: 130rpx;">
				</image>
				</u-upload>
			</view>
		</view>
		
		<view class="info-box" style="margin-top: 24rpx">
			<view class="info-each">
				<view class="">视频库视频</view>
				<view class="">
					<!-- <text class="tint">请上传视频库视频</text> -->
				</view>
			</view>
			<view style="color: #999999;font-size: 22rpx;padding-top: 5rpx;">视视频库的视频，主要用于视频平台的宣传，一个视频只能发布一次，为了更好的宣传效果，你可以将同一个信息的视频，从不同的位置拍摄多个视频上传，由半柿平台免费帮你多次宣传，快速促进您信息的成交</view>
			<view class="upimg">
				<u-upload
					:fileList="fileList3"
					@afterRead="afterRead"
					@delete="deletePic"
					name="3"
					multiple
					:maxCount="6"
					accept="video"
				>
				<image src="../../static/imgs.png" mode="widthFix"
					style="width: 130rpx;height: 130rpx;">
				</image>
				</u-upload>
			</view>
		</view>

		</view>
		<!-- <view class="agree">
			<view class="circle" @click="select = !select">
				<u-icon name="checkbox-mark" color="#FF8007" v-if="select"></u-icon>
			</view>
			<view class="other">我已阅读、理解并同意</view>
			<view class="rule" @click="article(5,'同城任务发布规则')">《同城任务发布规则》</view>
		</view> -->
		<view class="btn" @click="save">发布</view>
		<u-calendar :show="show" @confirm="confirm" :maxDate="maxDate" @close="show = false" color="#FF8007">
		</u-calendar>
		
		
		<TopPopup :show1="show1" :meal="meal" @ckeck="ckeck" @padlock="padlock"></TopPopup>
		
		<view class="issue" @click="toVideo">
			拍摄教程
		</view>
	</view>
</template>

<script>
	import TopPopup from "@/components/topPopup.vue"
	export default {
		components: { TopPopup },
		data() {
			return {
				items: [],
				cate: '',
				cate_id: '',
				user: '',
				mobile: '',
				content: '',
				fileList1: [],
				fileList2:[],//视频 单
				fileList3:[],//视频 多
				name: '',
				id: '',
				
				show1:false,
				order_id:'',
				itemid:'',
				meal: [],
				current:null,
				
				myMoney:'',
				paytype:null
			};
		},
	
		onLoad(option) {
			if(option.id){
				this.id = option.id
				this.getInfo()
			}
			this.getType()
			this.getcombo()
			this.getMoney()
		},

		methods: {
			toVideo(){
			uni.navigateTo({
				url:'/pages/videoShopping/videoShopping?types=5'
			})
		},
			padlock(){
				this.show1 = false
				uni.navigateBack()
			},
			getMoney(){
			uni.$u.http.post('/getmoney ').then(res => {
				if (res.code === 1) {
					this.myMoney = res.data
				}
			}).catch((res) => {
				
			})
		},
			ckeck(e) {
				if(!e.id) return this.toast('请选择置顶套餐')
			if(this.myMoney < e.money){
				//余额不足 微信支付
				uni.$u.http.post('/meallist', {
					type:0,
					order_id: this.order_id,
					id:e.id,
					paytype:this.paytype
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						let that = this
						uni.requestPayment({
							appId: res.data.pay.appId,
							nonceStr: res.data.pay.nonceStr,
							package: res.data.pay.package,
							paySign: res.data.pay.paySign,
							signType: res.data.pay.signType,
							timeStamp: res.data.pay.timeStamp,
							success: (e) => {
								that.toast(res.msg)
								that.show1 = false
								setTimeout(() => {
									uni.navigateBack()
								},500)
							},
							fail: (e) => {
								that.$u.toast('支付失败');
							}
						})
					}
				}).catch((res) => {
						
				})
			}else {
				//余额支付
				uni.$u.http.post('/meallist', {
					type:0,
					order_id: this.order_id,
					id:e.id,
					paytype:4
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.toast(res.msg)
						this.show1 = false
						setTimeout(() => {
							uni.navigateBack()
						},500)
					}
				}).catch((res) => {
						
				})
			}
			
			},
			getcombo() {
				uni.$u.http.post('/meallist',{
					mealtype:0
				}).then(res => {
					if (res.code == 1) {
						this.meal = res.data
					}
				}).catch((res) => {
				})
			},
			
			save() {
				if (this.cate_id === '') {
					uni.$u.toast('请选择分类');
					return
				}
				if (this.user === '') {
					uni.$u.toast('请输入联系人');
					return
				}
				if (!uni.$u.test.mobile(this.mobile)) {
					uni.$u.toast('请输入正确的联系电话');
					return
				}
				if (this.name === '') {
					uni.$u.toast('请输入信息标题');
					return
				}
				if (this.content === '') {
					uni.$u.toast('请输入信息内容');
					return
				}

				
				// if (this.fileList1.length === 0) {
				// 	uni.$u.toast('请上传信息图片');
				// 	return
				// }
				



				let images = this.fileList1.map((value) => {
					return value.fullurl
				})
				let video = [];
			this.fileList2.forEach(item => {
				video.push(item.url)
			})
			let videos = [];
			this.fileList3.forEach(item => {
				videos.push(item.url)
			})
				console.log(this.starttime)
				let data = {
					type: 'add',
					info_cate_id: this.cate_id,
					user: this.user,
					mobile: this.mobile,
					name: this.name,
					content: this.content,
					images: images.join(','),
					video:video.join(','),
				    videos:videos.join(','),
				}
				if(this.id){
					data['type'] = 'edit'
					data['id']= this.id
				}
				uni.$u.http.post('/info', data).then(res => {
					if (res.code == 1) {
						uni.$u.toast(res.msg)
						// setTimeout(() => {
						// 	uni.$emit('editinfo')
						// 	uni.$u.route({
						// 		type: 'back'
						// 	})
						// }, 1000)
						this.order_id = res.data
						this.show1 = true
					}
				}).catch((res) => {

				})
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					console.log(result)
					if (result) {
						let item = this[`fileList${event.name}`][fileListLen]
						this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: this.oss(result),
							fullurl: result
						}))
						fileListLen++
					} else {
						this[`fileList${event.name}`].splice(fileListLen, 1)
					}

				}
				console.log(this[`fileList${event.name}`])
			},
			uploadFilePromise(url) {
				console.log(url)
				let that = this
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: that.Upload.uploadurl, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							type: 'image',
							token: uni.getStorageSync('token')
						},
						success: (res) => {
							let data = JSON.parse(res.data)
							if (res.statusCode === 200 && data.code === 1 && data.data) {
								resolve(data.data.url)
							} else {
								resolve()
							}
						}
					});
				})
			},
			onchange(e) {
				console.log(e.detail.value[0])
				this.cate_id = e.detail.value[0].value
				this.cate = e.detail.value[0].text
			},
			getInfo() {
				uni.$u.http.post('/info', {
					type:'info',
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						this.cate = res.data.catename
						this.cate_id = res.data.info_cate_id
						this.content = res.data.content
						this.name = res.data.name
						this.user = res.data.user
						this.mobile = res.data.mobile
						this.fileList1 = res.data.images.map(value => {
							return {
								url: this.oss(value),
								fullurl: value
							}
						})
						if(res.data.video){
						this.fileList2 = res.data.video.split(",").map(value => {
							return {
								url: this.oss(value),
								ful: value
							}
						})
					}
					if(res.data.videos){
						this.fileList3 = res.data.videos.split(",").map(value => {
							return {
								url: this.oss(value),
								ful: value
							}
						})
					}
					}
				}).catch((res) => {
				
				})
			},
			getType() {
				uni.$u.http.post('/infocate ', {}).then(res => {
					if (res.code == 1) {
						for(let i =0; i < res.data.length; i++){
							res.data[i]= {
								text: res.data[i].name,
								value: res.data[i].id
							}
						}
						this.items = res.data

					}
				}).catch((res) => {

				})
				
			},
			
		}
	}
</script>
<style>
	.auth .input-value-border {
		opacity: 0;
	}
</style>
<style lang="scss" scoped>
	page {
		background: #F6F6F6;
	}

	.auth {
		background: linear-gradient(to bottom, #FFC141, #F6F6F6);
		background-size: 750rpx 500rpx;
		background-repeat: no-repeat;
		padding-top: 50rpx;

		.btn {
			background: linear-gradient(to right, #FFDF41, #FFC141);
			height: 88rpx;
			border: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 50rpx auto 50rpx;
			width: 590rpx;
			border-radius: 44rpx;
		}

		.agree {
			display: flex;
			align-items: center;
			padding: 30rpx 20rpx 20rpx;

			.circle {
				width: 30rpx;
				height: 30rpx;
				box-sizing: border-box;
				border-radius: 50%;
				border: 1px solid #999999;
				margin-right: 10rpx;
				display: flex;
				align-items: center;
			}

			.select {
				width: 22rpx;
				height: 22rpx;
			}

			.other {
				font-size: 22rpx;
				color: #999999;
			}

			.rule {
				font-size: 22rpx;
				color: #FF8007;
			}
		}

		.notice {
			font-size: 22rpx;
			color: #FF8007;
			padding: 0 20rpx;
		}

		.info {
			background: #FFFFFF;
			margin: 0 20rpx;
			border-radius: 20rpx;
			padding: 0 20rpx 20rpx;

			.line {
				height: 100rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #F6F6F6;
				position: relative;

				.l {
					color: #575859;
					font-size: 32rpx;
					width: 180rpx;
					text-align: right;
				}

				.r {
					flex: 1;
				}

				.picker {
					position: absolute;
					height: 100%;
					left: 180rpx;
					right: 0;
					top: 10rpx;
					z-index: 100;
				}

				.con {

					// height: 100%;
				}
			}

			.voice {
				padding: 20rpx;
				display: flex;
				align-items: center;
				position: relative;
				z-index: 10;
				.voicebtn {
					width: 114rpx;
					height: 114rpx;
					display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: center;
					background: linear-gradient(to bottom, #95C0FF, #428DFC);
					margin-right: 40rpx;
					border-radius: 50%;

					.icon {
						width: 40rpx;
						height: 53rpx;
					}

					.word {
						font-size: 24rpx;
						color: #fff;
					}
				}

				.shape {
					flex: 1;
					position: relative;

					.close {
						position: absolute;
						right: 10rpx;
						top: 10rpx;
						width: 42rpx;
						height: 42rpx;
					}

					.icon {
						width: 408rpx;
						height: 105rpx;
					}
				}
			}

			.imgBox {
				height: auto;
				align-items: flex-start;
				padding: 20rpx 0;
				justify-content: flex-start;
				position: relative;

				.address {
					position: absolute;
					width: 30rpx;
					height: 40rpx;
					right: 30rpx;
					bottom: 30rpx;
					z-index: 2;
				}
			}

			.box {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				height: 170rpx;
				width: 170rpx;
				border: 1px solid #FFCE54;
				border-radius: 20rpx;

				.icon {
					width: 51rpx;
					height: 49rpx;
				}

				.word {
					color: #FF8007;
					font-size: 30rpx;
					margin-top: 20rpx;
				}
			}
		}
	}
	
	
	.serveBox {
					width: 690rpx;
					border-radius: 20rpx;
	
					.serve_tit {
						// margin-top: 30rpx;
						text-align: center;
						font-size: 36rpx;
						color: #333333;
						font-weight: bold;
						line-height: 40rpx;
					}
					
					.tc-img {
						width: 600rpx;
						margin: auto;
						margin-top:24rpx;
						image {
							width: 600rpx;
							height: 500rpx;
						}
					}
					
					.serve_cont {
						// margin: 0 30rpx;
						display: flex;
						// flex-wrap: wrap;
						// flex-direction: row;
						
						width: 100%;
						
						
						overflow: hidden;
						overflow-x: auto;
						white-space: nowrap;
						.serve {
							margin: 30rpx 0;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							margin-right: 20rpx;
							padding: 16rpx 32rpx;
							// width: 190rpx;
							// height: 200rpx;
							box-sizing: border-box;
							border-radius: 20rpx;
							border: 1rpx solid #989898;
	
	
							.serve_num {
								margin-bottom: 20rpx;
								font-size: 32rpx;
								font-weight: bold;
								color: #333;
								line-height: 45rpx;
							}
	
							.serve_hour {
								font-size: 28rpx;
								font-weight: 400;
								color: #323232;
								line-height: 40rpx;
							}
						}
	
						.active {
							border: 2px solid #FF7A7A !important;
						}
	
					}
					
					.tc-btn-box {
						width: 560rpx;
						margin: auto;
						margin-top: 20rpx;
						display: flex;
						justify-content: space-between;
						.tc-btn1 {
							width: 220rpx;
							height: 80rpx;
							background-color: #FBBA45;
							border-radius: 10rpx;
							text-align: center;
							line-height: 80rpx;
						}
						.tc-btn2 {
							width: 220rpx;
							height: 80rpx;
							border-radius: 10rpx;
							text-align: center;
							line-height: 80rpx;
							background-color: #9A9A9A;
							color: #FFF;
						}
					}
				}
				
				
				
				
				
				.info-box {
					width: 622rpx;
					padding: 29rpx 32rpx;
					background: #ffffff;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					opacity: 1;
					margin: auto;
				
					.info-each {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 30rpx;
						font-weight: bold;
						color: #333333;
				
						.input {
							display: flex;
							align-items: center;
							text-align: right;
							font-size: 30rpx;
							font-weight: 500;
							color: #333333;
				
							text {
								display: inline-block;
								padding-left: 30rpx;
							}
						}
				
						image {
							width: 32rpx;
							height: 32rpx;
							position: relative;
							top: 7rpx;
							left: 20rpx;
						}
						.tint {
							font-size: 30rpx;
							font-weight: 500;
							color: #999999;
						}
						
						.pay-box {
							display: flex;
							align-items: center;
							.origin {
								padding: 0 16rpx;
								// width: 202rpx;
								height: 66rpx;
								border-radius: 0rpx 0rpx 0rpx 0rpx;
								opacity: 1;
								border: 1rpx solid #F0F0F0;
								font-size: 24rpx;
								font-weight: 500;
								color: #333333;
								margin-left: 16rpx;
								input {
									display: inline-block;
									width: 100rpx;
									position: relative;
									top: 10rpx;
								}
								text {
									font-size: 24rpx;
									font-weight: 500;
									color: #333333;
									.need {
										color: #FA7265;
									}
								}
							}
						}
					}
					.upimg {
						margin-top: 30rpx;
					}
				}
				
				
				.issue {
						width: 60rpx;
						height: 60rpx;
						background: linear-gradient(180deg, #FECB6F 0%, #FFAE1C 100%);
						border-radius: 0rpx 0rpx 0rpx 0rpx;
						opacity: 1;
						border-radius: 50%;
						font-size: 24rpx;
						font-weight: bold;
						color: #333333;
						padding: 20rpx;
						text-align: center;
						position: fixed;
						right: 32rpx;
						// bottom: 200rpx;
						bottom: 48%;
						z-index: 9;
					}
</style>
